<template>
	<view class="page-team">
		<view class="content">
			<view class="directlyUnder">
				<view class="title">
					▎所有动态
				</view>
			</view>
			<view class="member">
				<view class="dynamic" v-for="(item, collectProductListIndex) in collectProductList"
        :key="collectProductListIndex">
					<view class="time">
						用户<text class="user">{{ nickname.length > 4 ? nickname.substring(0, 4) + "..." : nickname }}</text>在 <text class="createTime">{{ item.createTime }}</text>{{ item.category == '登录'? '登录小程序' : '浏览此商品' }}
					</view>
					<view class="pnt-contetn" v-if="item.category != '登录'">
						<view class="images">
							<image :src="item.image" />
						</view>
						<view class="right">
							<view class="name">
								{{ item.storeName }}
							</view>
							<view class="price">
								￥{{ item.price }}
							</view>
						</view>
					</view>
					<view class="category" v-if="item.category != '普通' && item.category != '登录'">
						{{ item.category == null ? '' : item.category }}
					</view>
				</view>
				<view class="record-bg" v-if="record">
					<image src="https://h5.ylsp.vip/file/static/record-bg.png"></image>
				</view>
				<Loading :loaded="loadend" :loading="loading"></Loading>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapGetters
	} from "vuex";
	import {
	  getCollectUser4product
	} from "@/api/user";
	import Loading from "@/components/Loading";
	const NAME = "directlyUnder";
	export default {
		components: {
		  Loading
		},
		data() {
			return {
				uid: 0,
				nickname: '',
				page: 1,
				limit: 10,
				type:'foot',
				collectProductList: [],
				loading: false,
				loadend: false,
				record: false
			}
		},
		computed: mapGetters(["userInfo"]),
		mounted: function() {
			this.uid = this._route.query.uid;
			this.nickname = this._route.query.nickname;
			this.get_user_collect_product();
		},
		onReachBottom() {
		  !this.loading && this.get_user_collect_product();
		},
		methods: {
			get_user_collect_product: function() {
			  let that = this;
			  if (that.loading) return; 
			  if (that.loadend) return; 
			  that.loading = true;
			  getCollectUser4product(that.page, that.limit,that.type,that.uid).then(res => {
			    that.loading = false;
			    that.collectProductList.push.apply(that.collectProductList, res.data);
			    that.loadend = res.data.length < that.limit; 
				if(res.data.length > 0){
					that.record = false
				}else{
					that.record = true
				}
			    that.page = that.page + 1;
			  });
			}
		}
	}
</script>

<style lang="less">
	page {
		height: initial;
	}
	.page-team {
		height: 100%;
		width: 100%;
		
		.content {
			width: 100%;
			
			.plate{
				height: 510rpx;
				
				.top{
					padding: 0 !important
					
				}
			}
			
			.member{
				margin-top: 20rpx;
				
				.record-bg {
					height: 300rpx;
					width: 100%;
					image {
						width: 300rpx;
						height: 300rpx;
						display: block;
						margin: 0 auto;
					}
				}
				
				.dynamic{
					padding: 20rpx;
					background-color: #FFFFFF;
					margin-bottom: 20rpx;
					margin-left: 30rpx;
					margin-right: 30rpx;
					border-radius: 10rpx;
					position: relative;
					
					.category {
						position: absolute;
						right: 0;
						bottom: 0;
						height: 50rpx;
						display: inline-block;
						padding: 0 30rpx;
						background: -webkit-linear-gradient(to left,#f0c794,#ae9273); /* Safari 5.1-6.0 */
						background: -o-linear-gradient(to left,#f0c794,#ae9273); /* Opera 11.1-12.0 */ 
						background: -moz-linear-gradient(to left,#f0c794,#ae9273); /* Firefox 3.6-15 */
						background: linear-gradient(to left,#f0c794,#ae9273); /* 标准语法 */
						color: #FFFFFF;
						line-height: 50rpx;
						font-size: 28rpx;
						border-top-left-radius: 30rpx;
					}
					
					.time{
						color: #666;
						border-bottom: #E8E8E8 solid 1rpx;
						padding-bottom: 20rpx;
						font-size: 26rpx;
						
						.user {
							color: #1105fc;
							padding: 0 10rpx;
						}
						
						.createTime {
							color: #1105fc;
							padding: 0 10rpx;
						}
					}
					
					.pnt-contetn{
						overflow: hidden;
						padding: 30rpx 0 20rpx 0;
						
						.right{
							padding-left: 160rpx;
							
							.name{
								color: #666;
								font-size: 30rpx;
							
							}
							
							.price{
								color: #ff3334;
								font-size: 32rpx;
								padding-top: 30rpx;
							
							}
						}
						
						.images{
							height: 140rpx;
							width: 140rpx;
							float: left;
							
							image{
								width: 100%;
								height: 100%;
							}
						}
					}
				}
			}
			
			.directlyUnder {
				width: 100%;
				min-height: 100rpx;
				max-height: 360rpx;
				padding-bottom: 20rpx;
				background-color: #FFFFFF;
				
				.title {
					color: #000000;
					font-size: 36rpx;
					position: relative;
					padding: 30rpx 30rpx 0 30rpx;
					
					text{
						float: right;
					}
				}
			}
		}
	}

</style>
